<template>
	<div>
		<el-button class="box" @click="getRandomColor">改变颜色</el-button>
		<Test>
			<div class="slotted">slotted</div>
		</Test>
	</div>
</template>

<script setup lang="ts">
import Test from './test.vue'
import { ref } from 'vue'

const color = ref('teal')

function getRandomColor() {
	color.value = '#' + Math.floor(Math.random() * 16777215).toString(16)
}
</script>

<style scoped>
.box {
	/* 绑定颜色 */
	color: v-bind(color);
}

/* TODO 深度选择器 */
:deep(.deep) {
	color: teal;
}

/* TODO 全局选择 */
:global(.global) {
	color: blue;
}
</style>
